<!DOCTYPE html>
<html lang="ko">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<title>테이블</title>
	</head>

	<body>
		<h1>테이블</h1>
		<table style="width: 850px" border="1"
			cellpadding="5" cellspacing="0">
			<caption>게시판</caption>
			
			<colgroup style="background: orange">
				<col style="width: 10%" />
				<col  />
				<col style="width: 15%; background: yellow" />
				<col style="width: 15%" />
				<col style="width: 10%" />
			</colgroup>
			
			<tr> 
				<th>번호</th><th>제목</th>
				<th>작성자</th><th>작성일</th>
				<th>조회</th> </tr>
			<tr> 
				<td>1</td>
				<td>슈퍼셀의 Clash of Clan, 안드로이드 출시</td>
				<td>siestageek</td>
				<td>2013. 10. 10</td>
				<td>0</td> 
			</tr>
			<tr> 
				<td>2</td>
				<td>슈퍼셀의 Clash of Clan, 안드로이드 출시</td>
				<td>siestageek</td>
				<td>2013. 10. 10</td>
				<td>0</td> 
			</tr>	
			<tr> 
				<td>3</td>
				<td>슈퍼셀의 Clash of Clan, 안드로이드 출시</td>
				<td>siestageek</td>
				<td>2013. 10. 10</td>
				<td>0</td> 
			</tr>	
			<tr> 
				<td>4</td>
				<td>슈퍼셀의 Clash of Clan, 안드로이드 출시</td>
				<td>siestageek</td>
				<td>2013. 10. 10</td>
				<td>0</td> 
			</tr>	
			<tr> 
				<td>5</td>
				<td>슈퍼셀의 Clash of Clan, 안드로이드 출시</td>
				<td>siestageek</td>
				<td>2013. 10. 10</td>
				<td>0</td> 
			</tr>	
			<tr> 
				<td>6</td>
				<td>슈퍼셀의 Clash of Clan, 안드로이드 출시</td>
				<td>siestageek</td>
				<td>2013. 10. 10</td>
				<td>0</td> 
			</tr>	
			<tr> 
				<td>7</td>
				<td>슈퍼셀의 Clash of Clan, 안드로이드 출시</td>
				<td>siestageek</td>
				<td>2013. 10. 10</td>
				<td>0</td> 
			</tr>	
			<tr> 
				<td>8</td>
				<td>슈퍼셀의 Clash of Clan, 안드로이드 출시</td>
				<td>siestageek</td>
				<td>2013. 10. 10</td>
				<td>0</td> 
			</tr>	
			<tr> 
				<td>9</td>
				<td>슈퍼셀의 Clash of Clan, 안드로이드 출시</td>
				<td>siestageek</td>
				<td>2013. 10. 10</td>
				<td>0</td> 
			</tr>	
			<tr> 
				<td>10</td>
				<td>슈퍼셀의 Clash of Clan, 안드로이드 출시</td>
				<td>siestageek</td>
				<td>2013. 10. 10</td>
				<td>0</td> 
			</tr>	
		</table>
					
			<hr />
			<table style="width: 500px" border="1">
				<caption>지역별 홍차</caption>
				<colgroup>
					<col />
					<col />
				</colgroup>
				<tr> <td colspan="2">*</td> <!--<td>*</td>--> </tr>
				<tr> <td rowspan="3">*</td> <td>*</td> </tr>
				<tr> <!--<td>*</td>--> <td>*</td> </tr>
				<tr> <!--<td>*</td>--> <td>*</td> </tr>
				<tr> <td rowspan="4">*</td> <td>*</td> </tr>
				<tr> <!--<td>*</td>--> <td>*</td> </tr>
				<tr> <!--<td>*</td>--> <td>*</td> </tr>
				<tr> <!--<td>*</td>--> <td>*</td> </tr>
			</table>
				
				<hr />
				<table style="width: 750px" border="1">
					<caption> 한국의 차 </caption>
					<colgroup>
						<col />
						<col />
						<col />
						<col />
						<col />
						<col />
					</colgroup>
					<tr> <td colspan="6">*</td>
						<!--<td>*</td><td>*</td>
					<td>*</td><td>*</td><td>*</td>-->
					 </tr>
						
					<tr> <td rowspan="6">*</td><td>*</td><td rowspan="10">*</td>
						<td>*</td><td>*</td><td>*</td> </tr>
					<tr> <!--<td>*</td>--><td>*</td><!--<td>*</td>-->
						<td>*</td><td>*</td><td>*</td> </tr>
					<tr> <!--<td>*</td>--><td>*</td><!--<td>*</td>-->
						<td>*</td><td>*</td><td>*</td> </tr>
					<tr> <!--<td>*</td>--><td>*</td><!--<td>*</td>-->
						<td>*</td><td>*</td><td>*</td> </tr>
					<tr> <!--<td>*</td>--><td>*</td><!--<td>*</td>-->
						<td>*</td><td>*</td><td>*</td> </tr>
					<tr> <!--<td>*</td>--><td>*</td><!--<td>*</td>-->
						<td>*</td><td>*</td><td>*</td> </tr>
					<tr> <td rowspan="3">*</td><td>*</td><!--<td>*</td>-->
						<td>*</td><td>*</td><td>*</td> </tr>
					<tr> <!--<td>*</td>--><td>*</td><!--<td>*</td>-->
						<td>*</td><td>*</td><td>*</td> </tr>
					<tr> <!--<td>*</td>--><td>*</td><!--<td>*</td>-->
						<td>*</td><td>*</td><td>*</td> </tr>
					
				</table>
				
				<hr />
				
				<table style="width: 850px" border="1">
					<caption>시간표</caption>
					<colgroup>
						<col style="width: 10%" />
						<col style="width: 10%" />
						<col style="width: 10%" />
						<col style="width: 10%" />
						<col style="width: 10%" />
						<col style="width: 10%" />
						<col style="width: 10%" />
						<col style="width: 10%" />
						<col style="width: 10%" />
						<col style="width: 10%" />
					</colgroup>
					
					<thead>
						<tr><td colspan="3">9.09 ~ 9.20</td>
							<td colspan="4">지지 간호 대학교</td>
							<td colspan="3">강의실 : 403</td>
						</tr>
					</thead>
					<tfoot>
						<tr><td colspan="10">
						<ul><li>추석 보강 :</li>
							<li>중간 고사 :</li>
						</ul>	</td></tr>
					</tfoot>
					<tbody>
						<tr> <td rowspan="2">*</td>
							<td rowspan="2">*</td><td>*</td><td>*</td><td>*</td>
							<td>*</td><td>*</td><td>*</td><td>*</td><td>*</td> </tr>
						<tr> <td>*</td><td>*</td><td>*</td>
							<td>*</td><td>*</td><td>*</td><td>*</td><td>*</td> </tr>
						
						<tr> <td>*</td>
							<td rowspan="2">월</td>
							<td rowspan="2">*</td><td>*</td>
							<td colspan="2">*</td>
							<td colspan="2">*</td>
							<td colspan="2" rowspan="2">*</td> </tr>
						<tr> <td>*</td>
							<td colspan="3">*</td>
							<td colspan="2">*</td></tr>		
					
					</tbody>	
										
				</table>
				
		<!-- 너비는 350px, 테두리는 5px
			 열 안쪽여백은 5, 바깥쪽 여백은 0
			 제목은 '내용이 없는 테이블'
			 3 X 3 크기의 표 작성 -->
		<table width="350px" cellpadding="5"
			cellspacing="0" border="5" align="center">
			<caption>내용이 없는 테이블</caption>
			<colgroup><col /><col /><col /></colgroup>
			<tr><td>&nbsp;</td><td>&pi;</td><td>&amp;</td></tr>
			<tr><td>&lt;h1&gt;</td><td>&copy;</td><td>&nbsp;</td></tr>
			<tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr>
		</table>	 
		
		<!--
			table : 테이블
			엑셀처럼 행과 열로 이뤄진 
			그리드grid에 정보 표시
			정보를 두 축(행,열)으로 구분해서 
			복잡한 데이터 표시
	     그리드의 각 블럭은 테이블 셀(열)이라 함
 			표table를 작성하는 순서는 행tr을 먼저 정의하고
 			그 후 내용을 나타내기 위한 열td,th을 정의

			<tr>은 표의 행을 정의
 			<th>는 제목 열을 정의
 			<td>는 일반 열을 정의
 			th/td 요소에 colspan/rowspan 속성으로
			여러 개의 셀을 하나로 결합할 수도 있음
			
			caption 태그로 표의 제목을 표시
			
			표의 전체 열/각 열에 대해 
			스타일(배경색,너비등)을 지정하려면
			colgroup과 col 태그를 사용
			반드시 caption 태그 아래에 작성
			
			계산서처럼 어떤 테이블은
 			머리말, 본문외 에도 꼬리말이 존재함
 			thead 태그로 머리말을
 			tbody 태그로 본문을
 			tfoot 태그로 꼬리말을 나타낼 수 있음

			width 속성으로 테이블 너비 지정
			border 속성으로 테이블 테두리 지정
		 테두리 단위는 픽셀px
		 cellpadding 속성으로 테이블 각 열 내부 여백을
		 cellspacing 속성으로 테이블 각 열 사이 여백 지정
		 하지만, CSS를 사용할 것을 추천함

		-->
		
		
		
	</body>
</html>
